<template>
  <div class="home-container">
    <!-- 头部 -->
    <Header />
    
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <div class="banner">
        <el-carousel height="300px" indicator-position="outside" arrow="always" :interval="4000">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <div class="banner-link" @click="handleBannerClick(item.url)">
              <img :src="item.image" :alt="item.title" class="banner-image">
              <div class="banner-info">
                <h3 class="banner-title">{{ item.title }}</h3>
                <p class="banner-desc">{{ item.description }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      
      <!-- 搜索框 -->
      <!-- <div class="search-section">
        <div class="search-container">
          <el-input
            placeholder="搜索你想要的美食..."
            prefix-icon="el-icon-search"
            v-model="searchKeyword"
            @keyup.enter.native="searchFood"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchFood">搜索</el-button>
          </el-input>
        </div>
      </div> -->
      
      <!-- 商家分类 -->
      <div class="merchant-categories">
        <h2 class="section-title">
          <i class="el-icon-menu"></i> 商家分类
          <small>选择你喜欢的品类</small>
        </h2>
        <div class="category-list">
          <div v-for="(category, index) in categories" :key="index" class="category-item" @click="goToMerchantList(category.id)">
            <div class="category-icon">
              <i :class="category.icon"></i>
            </div>
            <div class="category-name">{{ category.name }}</div>
          </div>
        </div>
      </div>
      
      <!-- 推荐商家 -->
      <div class="recommended-merchants">
        <h2 class="section-title">
          <i class="el-icon-star-on"></i> 推荐商家
          <small>精选校园优质商家</small>
        </h2>
        <div class="merchant-list">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(merchant, index) in recommendedMerchants" :key="index">
              <div class="merchant-card" @click="goToMerchantDetail(merchant.id)">
                <div class="merchant-image">
                  <img :src="merchant.shopLogo" :alt="merchant.shopName">
                  <div class="merchant-tags" v-if="merchant.tags && merchant.tags.length">
                    <el-tag size="mini" v-for="(tag, i) in merchant.tags.split(',')" :key="i" type="warning">{{ tag }}</el-tag>
                  </div>
                </div>
                <div class="merchant-info">
                  <div class="merchant-name">{{ merchant.shopName }}</div>
                  <div class="merchant-rating">
                    <el-rate
                      v-model="merchant.rating"
                      disabled
                      text-color="#ff9900">
                    </el-rate>
                    <span class="rating-value">{{ merchant.rating }}分</span>
                  </div>
                  <div class="merchant-sales">月售 {{ merchant.monthlySales }} 单</div>
                  <div class="merchant-feature" v-if="merchant.feature">
                    <i class="el-icon-medal"></i> {{ merchant.feature }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="view-more">
          <el-button type="primary" plain @click="goToMerchantList()">
            <i class="el-icon-menu"></i> 查看更多商家
          </el-button>
        </div>
      </div>

      <!-- 用户反馈区 -->
      <div class="testimonial-section">
        <h2 class="section-title">
          <i class="el-icon-chat-dot-square"></i> 用户评价
          <small>看看大家都在说什么</small>
        </h2>
        <el-carousel :interval="5000" type="card" height="200px">
          <el-carousel-item v-for="(item, index) in testimonials" :key="index">
            <div class="testimonial-card">
              <div class="testimonial-avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="testimonial-content">
                <p class="testimonial-text">{{ item.content }}</p>
                <div class="testimonial-author">{{ item.author }}</div>
                <div class="testimonial-info">{{ item.info }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { getOpenMerchants } from '@/api/merchant'
import { getActiveBanners } from '@/api/banner'

export default {
  name: 'Home',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      banners: [],
      searchKeyword: '', // 搜索关键字
      // 商家分类
      categories: [
        { id: 1, name: '快餐便当', icon: 'el-icon-food' },
        { id: 2, name: '特色小吃', icon: 'el-icon-tableware' },
        { id: 3, name: '甜品饮品', icon: 'el-icon-ice-cream' },
        { id: 4, name: '果蔬生鲜', icon: 'el-icon-cherry' },
        { id: 5, name: '正餐优选', icon: 'el-icon-burger' }
      ],
      // 推荐商家
      recommendedMerchants: [],
      // 用户评价数据
      testimonials: [
        { 
          author: '李同学', 
          content: '非常喜欢这个平台，点餐很方便，送餐速度也很快，食物很新鲜。',
          info: '计算机学院 · 已点餐52次' 
        },
        { 
          author: '张同学', 
          content: '商家种类很多，总能找到喜欢的美食，而且价格也很实惠。',
          info: '经济管理学院 · 已点餐38次' 
        },
        { 
          author: '王同学', 
          content: '客服很贴心，有问题都能及时解决，体验非常好！',
          info: '外国语学院 · 已点餐27次' 
        },
        { 
          author: '刘同学', 
          content: '学校食堂太远，有了这个平台解决了我吃饭的大问题。',
          info: '理学院 · 已点餐45次' 
        }
      ]
    }
  },
  created() {
    this.fetchBanners()
    // 获取推荐商家
    this.getRecommendedMerchants()
  },
  methods: {
    // 获取轮播图数据
    fetchBanners() {
      getActiveBanners()
        .then(response => {
          if (response.code === 200) {
            this.banners = response.data || []
            console.log('获取轮播图成功:', this.banners)
          } else {
            console.error('获取轮播图失败:', response.message)
          }
        })
        .catch(error => {
          console.error('获取轮播图失败:', error)
        })
    },
    
    // 处理轮播图点击
    handleBannerClick(url) {
      // 判断是内部路由还是外部链接
      if (url.startsWith('http://') || url.startsWith('https://')) {
        // 外部链接，在新窗口打开
        window.open(url, '_blank')
      } else {
        // 内部路由，使用router导航
        this.$router.push(url)
      }
    },
    // 获取推荐商家
    getRecommendedMerchants() {
      getOpenMerchants({ page: 1, size: 6 }).then(response => {
          if (response.code == 200) {
          this.recommendedMerchants = response.data
        }
      }).catch(error => {
        console.error('获取推荐商家失败', error)
      })
    },
    // 跳转到商家列表页
    goToMerchantList(categoryId) {
      if (categoryId) {
        this.$router.push(`/merchants?category=${categoryId}`)
      } else {
        this.$router.push('/merchants')
      }
    },
    // 跳转到商家详情页
    goToMerchantDetail(merchantId) {
      this.$router.push(`/merchants/${merchantId}`)
      // this.$message.info('商家详情页面尚未实现')
    },
    // 搜索食物
    searchFood() {
      if (this.searchKeyword.trim()) {
        this.$router.push(`/merchants?keyword=${encodeURIComponent(this.searchKeyword.trim())}`)
      } else {
        this.$message.info('请输入搜索关键词')
      }
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

.main-content {
  flex: 1;
  padding-top: 80px; /* 添加头部高度的padding，避免内容被固定定位的头部覆盖 */
  padding-bottom: 30px;
}

/* 轮播图样式 */
.banner {
  margin-bottom: 30px;
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.banner-image {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  background-color: #f5f7fa;
}

/* 搜索区域 */
.search-section {
  max-width: 800px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

.search-container {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 20px;
  border-left: 4px solid #409EFF;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  color: #409EFF;
}

.section-title small {
  font-size: 14px;
  color: #909399;
  margin-left: 10px;
  font-weight: normal;
}

/* 商家分类样式 */
.merchant-categories {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.category-item {
  width: 18%;
  text-align: center;
  padding: 20px 0;
  border-radius: 8px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
}

.category-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: #409EFF;
}

.category-icon {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 10px;
}

.category-name {
  font-size: 16px;
  font-weight: bold;
}

/* 推荐商家样式 */
.recommended-merchants {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.merchant-list {
  margin-bottom: 30px;
}

.merchant-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ebeef5;
}

.merchant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  border-color: #409EFF;
}

.merchant-image {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.merchant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.merchant-card:hover .merchant-image img {
  transform: scale(1.1);
}

.merchant-tags {
  position: absolute;
  top: 10px;
  right: 10px;
}

.merchant-tags .el-tag {
  margin-left: 5px;
}

.merchant-info {
  padding: 15px;
}

.merchant-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.merchant-rating {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.rating-value {
  margin-left: 5px;
  color: #ff9900;
  font-weight: bold;
}

.merchant-sales {
  font-size: 14px;
  color: #909399;
  margin-bottom: 6px;
}

.merchant-feature {
  font-size: 14px;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.merchant-feature i {
  margin-right: 5px;
}

.view-more {
  text-align: center;
  margin-top: 20px;
}

/* 用户评价区域 */
.testimonial-section {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.testimonial-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #409EFF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

.testimonial-content {
  flex: 1;
}

.testimonial-text {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
  font-style: italic;
}

.testimonial-author {
  font-weight: bold;
  color: #303133;
}

.testimonial-info {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 链接相关样式 */
.banner-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px 20px;
  box-sizing: border-box;
  transition: opacity 0.3s;
}

.banner-title {
  margin: 0;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: bold;
}

.banner-desc {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.el-carousel__arrow {
  background-color: rgba(0, 0, 0, 0.5);
}

.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
  .category-item {
    width: 48%;
    margin-bottom: 15px;
  }
  
  .testimonial-card {
    flex-direction: column;
    text-align: center;
  }
  
  .testimonial-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
</style> 